<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta name="apple-mobile-web-app-capable" content="yes" />
        <meta name="apple-mobile-web-app-status-bar-style" content="black" />
        <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, maximum-scale=1.0, minimal-ui" />
        
        <title>Checkbox Documentation</title>
        
        <script src="/js/greyspots.js" type="text/javascript"></script>
        <link href="/css/greyspots.css" type="text/css" rel="stylesheet" />
        
        <script src="/js/ace/ace.js" data-ace-base="/js/ace/" type="text/javascript" charset="utf-8"></script>
        <script src="/js/ace/ext-language_tools.js" type="text/javascript"></script>
        <script src="/js/ace/ext-searchbox.js" type="text/javascript"></script>
        
        <script src="doc-library/doc.js" type="text/javascript"></script>
        <link href="doc-library/doc.css" type="text/css" rel="stylesheet" />
    </head>
    <body>
        <gs-jumbo>
            <h1 class="text-center">Checkbox</h1>
        </gs-jumbo>
        <gs-container min-width="sml;med;lrg">
            <h3 class="doc-header">Tag:</h3>
            <pre><code>&lt;gs-checkbox&gt;&lt;/gs-checkbox&gt;</code></pre>
            
            <h3>Description:</h3>
            <p>
                A checkbox, also known as a tickbox is a clickable box that changes between values when clicked. In most cases the values that the checkbox changes between will be "true" and "false" or "-1" and "0". However, there are two other possibilities: "true", "null" and "false" or "-1", "n" and "0".
            </p>
            
            <h1>Examples:</h1>
            <div class="doc-section">
                <div class="doc-example-description">
                    <span class="h3">Skeleton Example:</span><br />
                    <p>A basic <code>&lt;gs-checkbox&gt;</code> element. Without attributes the checkbox will have the following behaviors:<br /></p>
                    <ol>
                    <li><p>) The checkbox value will start at "false".<br /></p></li>
                    <li><p>) The checkbox value will change between "true" and "false".<br /></p></li>
                    </ol>
                </div>
                <gs-doc-example>
                    <template for="html" height="5">
                        <gs-checkbox></gs-checkbox>
                    </template>
                </gs-doc-example>
                
                <div class="doc-example-description">
                    <span class="h3">Attribute <code>[column]</code>:</span>
                    <p>When you have a <code>gs-checkbox</code> inside a data element and you want to use it to display cell data you use the <code>column</code> attribute.</p>
                </div>
                <gs-doc-example>
                    <template for="html" height="14">
                        <gs-form src="gsdoc.tpeople_line" where="id=2418">
                            <template>
                                <b>Alive:</b>
                                <gs-checkbox column="alive"></gs-checkbox>
                            </template>
                        </gs-form>
                    </template>
                </gs-doc-example>
                
                <div class="doc-example-description">
                    <span class="h3">Attribute <code>[onchange=""]</code>:</span><br />
                    <p>A <code>&lt;gs-checkbox&gt;</code> element with an <code>[onchange]</code> attribute.</p>
                </div>
                <gs-doc-example>
                    <template for="html" height="5">
                        <gs-checkbox onchange="alert(this.value)"></gs-checkbox>
                    </template>
                </gs-doc-example>
                
                <div class="doc-example-description">
                    <span class="h3">Attribute <code>[value=""]</code>:</span><br />
                    <p>Four <code>&lt;gs-checkbox&gt;</code> elements with the <code>[value]</code> attribute set. The <code>[value]</code> attribute determines what type the checkbox uses of value: "true" and "false" or "-1" and "0". The javascript in this example is so you can see the value when you click on the checkbox.</p>
                </div>
                <gs-doc-example>
                    <template for="html" height="10">
                        <gs-checkbox value="true"></gs-checkbox>
                        <gs-checkbox value="false"></gs-checkbox>
                        <br />
                        <gs-checkbox value="-1"></gs-checkbox>
                        <gs-checkbox value="0"></gs-checkbox>
                    </template>
                    <template for="js" height="5">
                        window.addEventListener('change', function (event) {
                            alert(event.target.value);
                        });
                    </template>
                </gs-doc-example>
                
                <div class="doc-example-description">
                    <span class="h3">Attribute <code>[type]</code>:</span><br />
                    <p>Two <code>&lt;gs-checkbox&gt;</code> elements with the <code>[type]</code> attribute set. The <code>[type]</code> attribute sets the value type of the checkbox. If there is no attribute then it does boolean values: <code>true</code>, <code>false</code> If the attribute is set to <code>smalling</code> then it uses smallint values: <code>-1</code>, <code>0</code> The javascript in this example is so you can see the value when you click on the checkbox.</p>
                </div>
                <gs-doc-example>
                    <template for="html" height="5">
                        <gs-checkbox triplestate></gs-checkbox>
                        <br />
                        <gs-checkbox triplestate type="smallint"></gs-checkbox>
                    </template>
                    <template for="js" height="5">
                        window.addEventListener('change', function (event) {
                            alert(event.target.value);
                        });
                    </template>
                </gs-doc-example>
                
                <div class="doc-example-description">
                    <span class="h3">Attribute <code>[triplestate]</code>:</span><br />
                    <p>Six <code>&lt;gs-checkbox&gt;</code> elements with the <code>[value]</code> and <code>[triplestate]</code> attributes set. The <code>[triplestate]</code> attribute adds the value "null" or "n" depending on the type. The javascript in this example is so you can see the value when you click on the checkbox.</p>
                </div>
                <gs-doc-example>
                    <template for="html" height="14">
                        <gs-checkbox triplestate value="true"></gs-checkbox>
                        <gs-checkbox triplestate value="null"></gs-checkbox>
                        <gs-checkbox triplestate value="false"></gs-checkbox>
                        <br />
                        <gs-checkbox triplestate value="-1"></gs-checkbox>
                        <gs-checkbox triplestate value="n"></gs-checkbox>
                        <gs-checkbox triplestate value="0"></gs-checkbox>
                    </template>
                    <template for="js" height="5">
                        window.addEventListener('change', function (event) {
                            alert(event.target.value);
                        });
                    </template>
                </gs-doc-example>
                
                <div class="doc-example-description">
                    <span class="h3">Attribute <code>[tabindex=""]</code>:</span>
                    <p>With the <code>[tabindex=""]</code> attribute, you can control what order your controls are tabbed to.</p>
                </div>
                <gs-doc-example>
                    <template for="html" height="25">
                        <label for="control_1">1:</label>
                        <gs-text tabindex="1" id="control_1"></gs-text>
                        <label for="control_3">3:</label>
                        <gs-checkbox tabindex="3" id="control_3"></gs-checkbox>
                        <label for="control_2">2:</label>
                        <gs-text tabindex="2" id="control_2"></gs-text>
                        <label for="control_4">4:</label>
                        <gs-text tabindex="4" id="control_4"></gs-text>
                    </template>
                </gs-doc-example>
                
                <div class="doc-example-description">
                    <span class="h3">Attribute <code>[disabled]</code>:</span><br />
                    <p>The <code>[disabled]</code> attribute prevents the checkbox from changing.</p>
                </div>
                <gs-doc-example>
                    <template for="html" height="4">
                        <gs-checkbox disabled></gs-checkbox>
                    </template>
                </gs-doc-example>
                
                <div class="doc-example-description">
                    <span class="h3">Attribute <code>[readonly]</code>:</span><br />
                    <p>The <code>[readonly]</code> attribute is similar to <code>[disabled]</code> because it prevents the checkbox from changing. The difference is that readonly is styled differently.</p>
                </div>
                <gs-doc-example>
                    <template for="html" height="4">
                        <gs-checkbox readonly></gs-checkbox>
                    </template>
                </gs-doc-example>
                
                <!--<div class="doc-example-description">
                    <span class="h3">Attribute <code>[remove-all]</code> and related:</span><br />
                    <p>Sometimes you want the remove the rounded corners on a checkbox. This is usually used with grids.</p>
                </div>
                <gs-doc-example>
                    <template for="html" height="78">
                        <gs-grid widths="1,1" not-responsive>
                            <gs-block>
                                Remove Right:<br />
                                <gs-checkbox remove-right></gs-checkbox>
                            </gs-block>
                            <gs-block>
                                Remove Left:<br />
                                <gs-checkbox remove-left></gs-checkbox>
                            </gs-block>
                        </gs-grid><br />
                        Remove Bottom:<br />
                        <gs-checkbox remove-bottom></gs-checkbox>
                        Remove Top:<br />
                        <gs-checkbox remove-top></gs-checkbox><br />
                        <gs-grid widths="1,1" not-responsive>
                            <gs-block>
                                Remove Bottom Right:<br />
                                <gs-checkbox remove-bottom-right></gs-checkbox>
                            </gs-block>
                            <gs-block>
                                Remove Bottom Left:<br />
                                <gs-checkbox remove-bottom-left></gs-checkbox>
                            </gs-block>
                            <gs-block>
                                Remove Top Right:<br />
                                <gs-checkbox remove-top-right></gs-checkbox>
                            </gs-block>
                            <gs-block>
                                Remove Top Left:<br />
                                <gs-checkbox remove-top-left></gs-checkbox>
                            </gs-block>
                        </gs-grid><br />
                        <gs-grid widths="1,1" not-responsive>
                            <gs-block>
                                Remove Bottom and Right:<br />
                                <gs-checkbox remove-right remove-bottom></gs-checkbox>
                            </gs-block>
                            <gs-block>
                                Remove Bottom and Left:<br />
                                <gs-checkbox remove-left remove-bottom></gs-checkbox>
                            </gs-block>
                            <gs-block>
                                Remove Top and Right:<br />
                                <gs-checkbox remove-right remove-top></gs-checkbox>
                            </gs-block>
                            <gs-block>
                                Remove Top and Left:<br />
                                <gs-checkbox remove-left remove-top></gs-checkbox>
                            </gs-block>
                        </gs-grid><br />
                        Remove Top Right and Bottom Left:<br />
                        <gs-checkbox remove-top-right remove-bottom-left></gs-checkbox><br />
                        Remove Bottom Right and Top Left:<br />
                        <gs-checkbox remove-bottom-right remove-top-left></gs-checkbox><br />
                        Remove All:<br />
                        <gs-checkbox remove-all></gs-checkbox>
                    </template>
                </gs-doc-example>-->
                
                <div class="doc-example-description">
                    <span class="h3">Attributes <code>[inline]</code> and <code>[mini]</code>:</span><br />
                    <p>The <code>[inline]</code> attribute forces the checkbox to be the smallest size possible. The mini attribute lessens the height of the button and removes the border.</p>
                </div>
                <gs-doc-example>
                    <template for="html" height="18">
                        None:
                        <gs-checkbox></gs-checkbox><br />
                        Inline:
                        <gs-checkbox inline></gs-checkbox><br />
                        Mini:
                        <gs-checkbox mini></gs-checkbox><br />
                        Both:
                        <gs-checkbox mini inline></gs-checkbox><br />
                    </template>
                </gs-doc-example>
                
                <div class="doc-example-description">
                    <span class="h3">Attribute <code>[qs=""]</code>:</span><br />
                    <p>The name <code>[qs]</code> stands for "querystring". The querystring is the part in the URL after the "?". The <code>[qs]</code> attribute has two formats, each with their own use.</p>
                    
                    <ul>
                        <li>qs="<i>key1</i>=<i>attribute1</i>". This format allows you to fill any attribute with any key from the querystring. To use multiple keys from the querystring you can put a comma-separated list of these expressions (for example: qs="<i>key1</i>=<i>attribute1</i>,<i>key2</i>=<i>attribute2</i>"). If you need an attribute to be added when a querystring key is not present, replace the "=" with "!=" (for example: qs="<i>key1</i>!=<i>attribute1</i>", attribute1 will only be added if key1 is not in the querystring). As a shorthand, if the key in the querystring is the same name as the attribute you want to fill, you can omit the attribute name in the expression (for example: qs="<i>key1</i>="). If an expression doesn't find it's key in the querystring: it reverts the attribute that it fills to it's original value.</li>
                        <li>qs="<i>key</i>". This format will update the <code>[value]</code> attribute with the querystring whenever the querystring changes.</li>
                    </ul>
                </div>
                <gs-doc-example query-string="test1=true&test2=false">
                    <template for="html" height="35">
                        <gs-checkbox qs="test1">&nbsp;test1</gs-checkbox>
                        <gs-checkbox qs="test2=value" triplestate value="n">&nbsp;test2</gs-checkbox>
                        <gs-checkbox qs="test3=hidden">&nbsp;test3</gs-checkbox>
                        <gs-checkbox qs="test4!=hidden">&nbsp;test4</gs-checkbox>
                        <br />
                        <br />
                        <gs-grid widths="1,1">
                            <gs-block>
                                <gs-button onclick="GS.pushQueryString('test1=true');">Add "test1"</gs-button>
                            </gs-block>
                            <gs-block>
                                <gs-button onclick="GS.removeFromQueryString('test1');">Remove "test1"</gs-button>
                            </gs-block>
                            <gs-block>
                                <gs-button onclick="GS.pushQueryString('test2=false');">Add "test2"</gs-button>
                            </gs-block>
                            <gs-block>
                                <gs-button onclick="GS.removeFromQueryString('test2');">Remove "test2"</gs-button>
                            </gs-block>
                            <gs-block>
                                <gs-button onclick="GS.pushQueryString('test3=-1');">Add "test3"</gs-button>
                            </gs-block>
                            <gs-block>
                                <gs-button onclick="GS.removeFromQueryString('test3');">Remove "test3"</gs-button>
                            </gs-block>
                            <gs-block>
                                <gs-button onclick="GS.pushQueryString('test4=');">Add "test4"</gs-button>
                            </gs-block>
                            <gs-block>
                                <gs-button onclick="GS.removeFromQueryString('test4');">Remove "test4"</gs-button>
                            </gs-block>
                        </gs-grid>
                    </template>
                </gs-doc-example>
            </div>
        </gs-container>
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
    </body>
</html>
